<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <canvas id="cavans1" width="1000" height="800"></canvas>

    <script>
        let canvas1 = document.querySelector("#cavans1")
        let cvsCtx = canvas1.getContext("2d")

        // 保存状态
       function myTime(){
        cvsCtx.clearRect(0, 0, 1000, 800);
        cvsCtx.save();

        // 绘制表盘
        cvsCtx.beginPath();
        cvsCtx.translate(500, 400);
        cvsCtx.arc(0, 0, 200, 0, 2 * Math.PI);
        cvsCtx.strokeStyle = "gray";
        cvsCtx.lineWidth = 4;
        cvsCtx.stroke();
        cvsCtx.closePath();

        cvsCtx.save();
        

        // 绘制刻度

        for (let i = 0; i < 12; i++) {
            cvsCtx.beginPath();
            cvsCtx.rotate(2*Math.PI/12);
            cvsCtx.moveTo(200, 0);
            cvsCtx.lineTo(180, 0);
            cvsCtx.stroke();
            cvsCtx.closePath();


            
        }
 
        
        // 绘制分钟刻度   
        for(let j = 0;j< 12*5 ;j++){
            cvsCtx.beginPath();
            cvsCtx.rotate(2*Math.PI/60);
            cvsCtx.moveTo(190, 0);
            cvsCtx.lineTo(180, 0);
            cvsCtx.stroke();
            cvsCtx.closePath();
        }

            let time = new Date();
            let second = time.getSeconds()
            let min = time.getMinutes();
            let hour = time.getHours();
            if(hour > 12){
                hour-=12
            }
            console.log(hour,min,second)
     
            cvsCtx.save()
           
            cvsCtx.rotate(-0.5*Math.PI)
            cvsCtx.save()

          // 绘制秒针
            cvsCtx.rotate(second*2*Math.PI/60);
            cvsCtx.beginPath();
            cvsCtx.moveTo( 0, 0);
            cvsCtx.lineTo(160, 0);
            cvsCtx.strokeStyle = "red";
            cvsCtx.lineWidth = 1;
            cvsCtx.stroke();
            cvsCtx.closePath();
 
            cvsCtx.restore()   

          // 绘制分针
            cvsCtx.rotate(min*2*Math.PI/60 + 2*second*Math.PI/60/60); 
            cvsCtx.beginPath();
            cvsCtx.moveTo( 0, 0);
            cvsCtx.lineTo(140, 0);
            cvsCtx.strokeStyle = "blue";
            cvsCtx.lineWidth = 2;
            cvsCtx.stroke();
            cvsCtx.closePath();  

         // 绘制时针
            cvsCtx.save()
            cvsCtx.restore()
            cvsCtx.restore()
            
            cvsCtx.rotate(-0.5*Math.PI);
            cvsCtx.rotate(hour*2*Math.PI/12 + min*2*Math.PI/12/60);     

            cvsCtx.beginPath();
            cvsCtx.moveTo( 0, 0);
            cvsCtx.lineTo(110, 0);
            cvsCtx.strokeStyle = "black";
            cvsCtx.lineWidth = 2;
            cvsCtx.stroke();
            cvsCtx.closePath();  
            cvsCtx.restore()
            cvsCtx.restore()
       }

       setInterval(myTime,1000)




    </script>

</body>

</html>